<template>
  <div class="body">
    <div class="caption">
      <span class="maintitle">智慧实验室</span>
      <span class="subtitle">出色的研究始于出色的实验室管理 </span>
      <div class="screen">
        <img src="../../assets/wastemanagement/banner.jpg" alt="" />
      </div>
    </div>
    <div class="menumanagement">
      <ul class="menulist">
        <li v-for="items in menulist" class="waste" :key="items.menuname" @click="wastehandle(items)">
          <div class="photo">
            <img v-bind:src="items.imgurl" alt="" />
          </div>
          <span class="explain">{{ items.menuname }}</span>
        </li>

        <!-- 点击第一次的弹窗 start-->
        <el-dialog title="" :visible.sync="outerVisible" :width="'900px'" top="2vh" height="90%">
          <div class="module">
            <ul class="modulelist">
              <li class="modeleone" v-for="item in syslist" @click.stop="clicks(item)">
                <div class="modulepicture">
                  <img src='../../assets/wastemanagement/laboratory.png' alt="" />
                </div>
                <div class="introduce">
                  <div class="heading">{{ item.meta.title }}</div>
                </div>
                <!-- 子级 -->
                <ul v-if="item.children != null">
                  <li v-for="items in item.children" @click.stop="clickszi(items)">
                    <div class="introduces">
                      <div class="headings">{{ items.meta.title }}</div>
                    </div>
                  </li>
                </ul>
                <!-- 子级 -->
              </li>
            </ul>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="outerVisible = false">取 消</el-button>
          </div>
        </el-dialog>
        <!-- 点击第一次的弹窗 end-->
      </ul>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import { syssysPermissionlist, getDynamicMenuByUserid } from "@/api/index";

export default {
  name: "Index",
  data() {
    return {
      outerVisible: false,
      innerVisible: false,
      enterpriseBasic: '', //危废管理
      storagemanage: '',  //试剂耗材
      hazardousmanage: '', //危化品
      labsubscribe: '', //预约管理
      devicemonitor: '', //智慧大屏
      cabinetsafemanage: '', //硬件平台
      propertymanage: '', //设备管理
      reportstatis: '', //数据统计
      menulist: [
        { menuname: "危废管理", name: "enterpriseBasic", path: "/enterpriseBasic", imgurl: require('../../assets/wastemanagement/enterpriseBasic.png') },
        { menuname: "试剂耗材", name: "storagemanage", path: "/storagemanage", imgurl: require('../../assets/wastemanagement/storagemanage.png') },
        { menuname: "危化品", name: "hazardousmanage", path: "/hazardousmanage", imgurl: require('../../assets/wastemanagement/hazardousmanage.png') },
        { menuname: "预约管理", name: "labsubscribe", path: "/labsubscribe", imgurl: require('../../assets/wastemanagement/labsubscribe.png') },
        { menuname: "智慧大屏", name: "devicemonitor", path: "/devicemonitor", imgurl: require('../../assets/wastemanagement/devicemonitor.png') },
        { menuname: "硬件平台", name: "cabinetsafemanage", path: "/cabinetsafemanage", imgurl: require('../../assets/wastemanagement/cabinetsafemanage.png') },
        { menuname: "设备管理", name: "propertymanage", path: "/propertymanage", imgurl: require('../../assets/wastemanagement/propertymanage.png') },
        { menuname: "数据统计", name: "reportstatis", path: "/reportstatis", imgurl: require('../../assets/wastemanagement/reportstatis.png') }
      ],
      syslist: [],           //外层弹窗
      twosyslist: [],        //内层弹窗
      pid: undefined         //父级权限id
    };
  },
  created() {
    this.getlist();
    console.log("store", this.$store.state.user)

  },
  methods: {
    wastehandle(items) {
      this.outerVisible = true;
      // enterpriseBasic:'', //危废管理
      // storagemanage:'', //试剂耗材
      // hazardousmanage:'',//危化品
      // labsubscribe:'',//预约管理
      // devicemonitor:'',//智慧大屏
      // cabinetsafemanage:'',//硬件平台
      // propertymanage:'',//设备管理
      // reportstatis:'',//数据统计
      console.log("caidan", items)
      if (items.menuname == "危废管理") {
        this.syslist = this.enterpriseBasic.children
      }

      if (items.menuname == "危化品") {
        this.syslist = this.hazardousmanage.children
      }
      if (items.menuname == "试剂耗材") {
        this.syslist = this.storagemanage.children
      }

      if (items.menuname == "预约管理") {
        this.syslist = this.labsubscribe.children
      }
      if (items.menuname == "智慧大屏") {
        this.syslist = this.devicemonitor.children
      }
      if (items.menuname == "硬件平台") {
        this.syslist = this.cabinetsafemanage.children
      }
      if (items.menuname == "设备管理") {
        this.syslist = this.propertymanage.children
      }
      if (items.menuname == "数据统计") {
        this.syslist = this.reportstatis.children
      }

    },
    clicks(item) {
      console.log("item", item);
      // this.$router.push({path:`${item.uri}`,query:{item:item}})
      if (item.alwaysShow == false) {
        this.$router.push({ path: `${item.path}` })
      }
      // syssysPermissionlist(item.pid).then((res) => {
      //   console.log("syssysPermissionlist接口22222", res.data.data.list);
      //   this.twosyslist= res.data.data.list
      // });
    },
    //子级
    clickszi(item) {
      console.log("items", item);
      this.$router.push({ path: `${item.path}` })
    },
    // 获取菜单
    getlist() {
      // 获取菜单
      var menujson = {}
      menujson.userid = this.$store.state.user.id
      getDynamicMenuByUserid(menujson).then((res) => {
        console.log("菜单getDynamicMenuByUserid", res.data.data.list);
        // var menuarrjson = []
        // this.twosyslist= res.data.data.list
        // enterpriseBasic:'', //危废管理
        // storagemanage:'', //试剂耗材
        // hazardousmanage:'',//危化品
        // labsubscribe:'',//预约管理
        // devicemonitor:'',//智慧大屏
        // cabinetsafemanage:'',//硬件平台
        // propertymanage:'',//设备管理
        // reportstatis:'',//数据统计
        var jsonArray = res.data.data.list
        for (let i = 0; i < jsonArray.length; i++) {
          // 危废管理
          if (jsonArray[i].name == "wastemanage") {
            this.enterpriseBasic = jsonArray[i]
          }
          // 试剂耗材
          if (jsonArray[i].name == "storagemanage") {
            this.storagemanage = jsonArray[i]
          }
          // 危化品
          if (jsonArray[i].name == "hazardousmanage") {
            this.hazardousmanage = jsonArray[i]
          }
          // 预约管理
          if (jsonArray[i].name == "labsubscribe") {
            this.labsubscribe = jsonArray[i]
          }
          // 智慧大屏
          if (jsonArray[i].name == "devicemonitor") {
            this.devicemonitor = jsonArray[i]
          }
          // 硬件平台
          if (jsonArray[i].name == "cabinetsafemanage") {
            this.cabinetsafemanage = jsonArray[i]
          }
          // 设备管理
          if (jsonArray[i].name == "propertymanage") {
            this.propertymanage = jsonArray[i]
          }
          // 数据统计
          if (jsonArray[i].name == "reportstatis") {
            this.reportstatis = jsonArray[i]
          }
        }
      });

    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.body {
  position: relative;
  height: calc(100vh - 84px)
}

.caption .maintitle {
  position: absolute;
  z-index: 999;
  top: 100px;
  left: 200px;
  font-size: 40px;
  font-weight: bold;
  color: white;
}

.caption .subtitle {
  position: absolute;
  z-index: 999;
  top: 200px;
  left: 200px;
  font-size: 20px;
  font-weight: bold;
  color: white;
}

.caption .screen img {
  width: 100%;
  height: auto;
}

.menulist {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  // align-items: center;
}

.menulist .waste {
  display: flex;
  width: 24%;
  height: 46%;
  margin: 0.5%;
  // width: 370px;
  // height: 180px;
  border: 2px solid #eee;
  border-radius: 8px;
  box-shadow: 0 0 15px #eee;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
  cursor: pointer;
}

.menulist .waste .photo img {
  width: 100px;
  height: 100px;
}

.menulist .waste .explain {
  font-weight: 900;
  font-size: 20px;
  padding-right: 25px;
}

//模块内样式
.module {
  margin-top: 20px;
  height: 500px;

}

.module ul {
  list-style: none;
  padding: 0;
}

.module ul li {
  cursor: pointer;
}

.modulelist {
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  flex-wrap: wrap;
  // border: 1px solid red;
  width: 100%;
  height: 100%;
  top: 2vh;
}

.modeleone {
  width: 21%;
  // height: 21%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  // border: 1px solid #eee;

}

.modeleone .modulepicture {
  border-radius: 50%;
  // border: 1px solid red;
  height: 75px;
  width: 75px;
  // background-color: rgb(65,68,85);
  display: flex;
  align-items: center;
  justify-content: center;

}

.modeleone .modulepicture img {
  width: 75px;
  height: 75px;
}

.modeleone .introduce {
  font-size: 18px;
  color: black;
  margin-top: 5px;
  font-weight: 600;
}

.modeleone .introduces {
  font-size: 15px;
  color: black;
  margin-top: 5px;
  font-weight: 600;
}

.menumanagement {
  height: calc(100vh - 484px)
}
</style>